<template>
  <el-drawer
    :title="title"
    :visible.sync="openDrawer"
    direction="rtl"
    :before-close="handleClose"
    :modal="false"
    :showClose="false"
    custom-class="drawer"
  >
    <div class="content">
      <template v-if="selected.length > 0">
        <div v-for="(i, index) in selected" :key="i.pikId" class="text-margin">
          <span>{{ i.jajdh }}</span>
          <i class="el-icon-circle-close" @click="delSelected(index)"></i>
        </div>
      </template>
    </div>
    <div class="footer">共借阅档案 {{ selected.length }} 份</div>
  </el-drawer>
</template>

<script>
export default {
  props: ["drawer", "title", "selected"],
  data () {
    return {
      direction: "rtl",
    };
  },
  methods: {
    handleClose (done) {
      done();
    },
    delSelected (index) {
      this.$bus.$emit("deled", index);
    }
  },
  computed: {
    openDrawer: {
      get () {
        return this.drawer
      },
      set () {
        this.$emit("update:drawer", false);
      }
    }
  },
};
</script>

<style>
.text-margin:nth-last-child(n + 1) {
  margin-bottom: 10px;
}
</style>